/**
 * 日终组合分析
 */
import React, {Component} from 'react';
import {connect} from 'dva';
import {routerRedux} from 'dva/router'
import {Row, Col,  Card} from 'antd';
import moment from 'moment';
moment.locale('zh-cn');
import '../common.less'
import {
		Tabtitle,
		List,
		IECharts,
		NoData
	} from '../../../../components'
import {
		ToolBar,
		TradeOverview,TargetRatio,
		TradeRate,PriceDifference
	} from '../components'

import style from './index.less'

/**
 * 成本走势
 */
const CostTrend=({data})=>{
	const x={
					name:'',
					data:data.map((item, i) =>item.date)
				},
				myData=[
					{
						name: '隐性成本',
						data: data.map((item, i) =>item.impcost)
					}, {
						name: '显性成本',
						data: data.map((item, i) =>item.expcost)
					}

				],
				lineWidth=2,
				series=[],
				legend=[]

	myData.map((item,i)=>{
		legend.push(item.name)
		series.push({
			name:item.name,
			type: 'line',
			data: item.data,
			symbol:"circle",
			// stack:'总量',
			symbolSize:8,
			lineStyle:{
				normal:{
					width:lineWidth
				},
				emphasis:{
					width:lineWidth
				}
			}
		})
	})

	const myProps={
		option: {
			color:['#4990e2','#4fb8ff','#a990ff'],
			tooltip: {
				trigger: 'axis'
			},
			legend: {
				// orient: 'vertical',
				// left: 'right',
				top: '5%',
				right:'5%',
				data: legend
			},
			grid: {
				left: '3%',
				right: '5%',
				bottom: '10%',
				top:'16%',
				containLabel: true
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: x.data,
				axisTick: {
					alignWithLabel: true,
					show:false
				},
				axisLine:{
					show:false
				}
			},
			yAxis: {
				type: 'value',
				min: function(value) {
						return  value.min
				},
				max: function(value) {
						return value.max
				},
				axisTick: {
					alignWithLabel: true,
					show:false
				},
				axisLine:{
					show:false
				}
			},
			series:series
		}
	}
	return(
		<div  className={`chart line ${style.line}`}>
			<IECharts {...myProps} resizable={true}/>
		</div>
	)
}

const Dailysummary = ({dispatch, dailysummary,location}) => {
	const {pathname,query}=location
	const tag='dailysummary'
	const {
		date,
		fundId,
		fundList,
		summary,
		listPerformance,
		listsum,
		stockBalance,
		costTrend,
		spreadCaptureHist
	} = dailysummary



	const toolbarProps={
		date,
		fundId,
		fundList,
		dispatch,
		location,
		tag
	},
	tradeOverviewProps={
		data:summary
	},
	targetRatioProps={
		dispatch,
		date,
		fundId,
		data:stockBalance,
		location,
		tag
	},
	CostRemarkProps={
		data:listsum
	},
	tradeRateProps={
		data:summary
	},
	priceDifferenceProps={
		data:spreadCaptureHist
	},
	qualityRemarkProps={
		data:listPerformance
	},
	costTrendProps={
		data:costTrend
	}

	return (
		<div className={`tca ${style.dailysummary}`}>
			<Tabtitle value={'日终组合分析'}/>
			<div className="content-inner">
				<ToolBar {...toolbarProps} />
				{
					summary&&listPerformance&&listsum&&stockBalance&&costTrend&&spreadCaptureHist?
					<div className="main-content">
						<Card title="交易概览" bordered={false}  className={`module ${style.overview}`}>
							<Row gutter={24}>
							<Col span={9}>
								<div className="table">
									<TradeOverview {...tradeOverviewProps} />
								</div>
							</Col>
							<Col span={9}>
								<TargetRatio {...targetRatioProps} />
							</Col>
							<Col span={6}>
								<div className="list">
									<List {...CostRemarkProps}/>
								</div>
							</Col>
							</Row>
						</Card>
						<Card title='交易质量' bordered={false}  className={`module ${style.quality}`}>
							<Row gutter={24}>
								<Col span={9}>
									<TradeRate {...tradeRateProps}/>
								</Col>
								<Col span={9}>
									<PriceDifference {...priceDifferenceProps} />
								</Col>
								<Col span={6}>
									<div className="list">
										<List {...qualityRemarkProps}/>
									</div>
								</Col>
							</Row>
						</Card>
						<Card title='成本走势' bordered={false}  className={`module ${style.trend}`}>
								<Row>
									<Col span={24}>
										<CostTrend {...costTrendProps}/>
									</Col>
								</Row>
							</Card>
					</div>:<NoData />
				}
			</div>
		</div>
	);


}

Dailysummary.propTypes = {
};

export default connect(({dailysummary}) => ({dailysummary}))(Dailysummary);
